<script setup>
/**
 * & 文件引入区域
 */
import { useI18n } from "vue-i18n";

import { h, onBeforeMount, ref } from "vue";

import { itemStore } from "@/stores/item";
import { useIndexStore } from "@/stores/indexStore";

import { selectAllTradinRate } from "@/server/api/userInfo";

/**
 * & 注册区
 */

/**
 * & 变量声明区
 */
const { locale } = useI18n();
let show = ref(false); // 汇率换算弹窗
let show2 = ref(true); // 广告弹窗
let show3 = ref(false); // 广告排名弹窗
let offset = ref({ x: 0, y: 200 }); // 设置浮气泡的初始位置
let offset2 = ref({ x: 2, y: 570 }); // 设置浮气泡的初始位置
let ecnyPrice = ref(""); // 输入的投入ecny
const fileList = ref([
  { url: "https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg" },
  // Uploader 根据文件后缀来判断是否为图片文件
  // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
]); // 上传的图片
let link = ref(
  "https://img0.baidu.com/it/u=1058961982,3919091402&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1728579600&t=dd2c721af9af4dc8550c4da67cab544c"
); // 广告链接
let linkList = ref([
  { userName: "xiaoqiang", price: 100, link: "123" },
  { userName: "llll", price: 100, link: "123" },
  { userName: "小李", price: 100, link: "123" },
  { userName: "小李", price: 100, link: "123" },
]); // 广告链接列表
/**
 * & 函数区
 */
// 获取汇率
const getTradinRateFun = async () => {
  let { data } = await selectAllTradinRate();

  if (data.code == 200) {
    useIndexStore().ForexList = data.data;
  }
};
const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器
  console.log(file);
};
onBeforeMount(() => {
  getTradinRateFun(); // 获取汇率

  // 获取默认语言
  let lang = itemStore().lang;

  // 判断是否有选中语言
  if (lang != null) {
    locale.value = lang;
  }
});
</script>

<template>
  <!-- 浮动气泡 -->
  <div class="bubble" v-show="useIndexStore().isConversionRateShow"></div>
  <div class="bubble2"></div>
  <van-floating-bubble axis="xy" teleport=".bubble2" magnetic="x" :gap="2" :offset="offset2"
    @click="show2 = true"><template #default>
      <!-- <img src="/images/f_logo.svg" class="f_logo" alt="" /> -->
    </template></van-floating-bubble>
  <van-floating-bubble :offset="offset" @click="show = true" teleport=".bubble" icon="after-sale" magnetic="x" axis="xy"
    :gap="0">
    <template #default>
      <img src="/images/f_logo.svg" class="f_logo" alt="" />
    </template>
  </van-floating-bubble>

  <div :dir="useIndexStore().isRtl ? 'rtl' : 'ltr'">
    <!-- <button style="font-size: 12rem; position: absolute; z-index: 1000000"
      @click="useIndexStore().isRtl = !useIndexStore().isRtl">
      切换
    </button> -->

    <!-- 汇率换算的弹窗 -->
    <van-popup :style="{
      padding: '15rem',
      borderRadius: '5rem',
      background: '#f0f0f0',
      top: '35%',
    }" v-if="useIndexStore().ForexList" v-model:show="show">
      <ConversionRate />
    </van-popup>
    <!-- 广告弹窗 -->
    <van-popup :style="{
      padding: '5rem',
      borderRadius: '5rem',
      background: '#f0f0f0',
      margin: '0 auto',
    }" v-model:show="show2">
      <!-- <van-icon name="arrow-left" size="45rem" class="arrow-left" /> -->
      <!-- <van-swipe @change="onChange"> -->
      <van-swipe>
        <van-swipe-item>
          <a :href="link"><img class="image" :src="link" /></a></van-swipe-item>
        <van-swipe-item><a :href="link"><img class="image" :src="link" /></a></van-swipe-item>
        <template #indicator>
          <div class="custom-indicator" @click="show3 = true">
            <!-- <van-icon name="cross"></van-icon> -->
            入驻
            <!-- <van-icon name="plus" /> -->
          </div>
        </template>
      </van-swipe>
      <!-- <iframe class="content" :src="link"></iframe> -->
      <!-- <van-icon name="arrow" size="45rem" class="arrow-right" /> -->
    </van-popup>
    <!-- 广告排名 -->
    <van-popup v-model:show="show3" closeable position="bottom"
      :style="{ height: '80%', background: '#f0f0f0', paddingTop: '20rem' }" class="popup3">
      <div class="link-main">
        <van-cell-group insetn class="link-cell" v-for="(item, index) in linkList" :key="index">
          <div :class="[
            'rank',
            index === 0
              ? 'first'
              : index === 1
                ? 'second'
                : index === 2
                  ? 'third'
                  : 'rank',
          ]">
            {{ index + 1 }}
          </div>
          <div class="user-name">{{ item.userName }}</div>
          <div class="price">ecny: {{ item.price }}</div>
        </van-cell-group>
      </div>
      <div class="checkOut">
        <div class="cell">
          <van-field label="广告链接：" type="digit" placeholder="请输入跳转链接" v-model="ecnyPrice" />
          <van-uploader v-model="fileList" :max-count="1" preview-size="40" :after-read="afterRead">
            <van-button icon="plus" round color="#642e8e" plain
              style="width: 120rem; margin-right: 12rem">上传封面</van-button></van-uploader>
        </div>
        <div class="cell">
          <van-field label="投入积分：" type="digit" placeholder="请输入投入积分" v-model="ecnyPrice" />
          <!-- 跳转 -->
          <div class="btn">入驻</div>
        </div>
      </div>
    </van-popup>
    <!-- 路由视图 -->
    <RouterView v-slot="{ Component, route }">
      <KeepAlive :max="10">
        <Component :is="Component" v-if="route.meta.keepAlive" :key="route.name" />
      </KeepAlive>

      <Component :is="Component" v-if="!route.meta.keepAlive" :key="route.name" />
    </RouterView>
  </div>
</template>

<style lang="scss">
.f_logo {
  width: 100%;
  object-fit: contain;
}

.bubble2 {
  .van-floating-bubble {
    width: 10rem;
    height: 50rem;
    background-color: rgb(154, 154, 154);
  }
}

.popup2 {
  display: flex;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }
}

.content {
  border: none;
}

.image {
  width: 100%;
  height: 100%;
}

.arrow-left {
  width: 0;
  height: 0;
  top: 15vh;
  //left: 2px;
  position: relative;
  color: #fff;
}

.arrow-right {
  width: 0;
  height: 0;
  top: 15vh;
  left: -50px;
  position: relative;
  color: #fff;
}

.custom-indicator {
  position: absolute;
  right: 5px;
  top: 5px;
  padding: 2px 5px;
  font-size: 18rem;
  background: rgba(0, 0, 0, 0.1);
  color: #fff;
}

.popup3 {
  .link-main {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20rem 10rem;
    padding: 5rem;
    overflow-x: auto;
    //background-color: #fff;

    .link-cell {
      display: flex;
      border-radius: 10rem;
      margin: 5rem 0;
      padding: 10rem 18rem;
      font-size: 16rem;
      justify-content: space-between;

      .price {
        font-size: 18rem;
        color: #642e8e;
      }

      .user-name {
        font-size: 15rem;
      }

      .rank {
        font-size: 18rem;
        font-weight: bold;
        color: rgb(197, 194, 194);
      }

      .first {
        color: rgb(251, 59, 59);
      }

      .second {
        color: rgb(255, 122, 50);
      }

      .third {
        color: rgb(250, 184, 3);
      }
    }
  }

  .checkOut {
    width: 100%;
    bottom: 0rem;
    background-color: #fff;
    position: fixed;
    display: flex;
    border-radius: 10rem;
    flex-direction: column;

    .cell {
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 60rem;

      .btn {
        border-radius: 27rem;
        width: 150rem;
        background: rgba(100, 46, 142, 1);
        color: rgba(255, 255, 255, 1);
        line-height: 36rem;
        font-size: 14rem;
        right: 12rem;
        padding: 5rem 30rem;
        text-align: center;
      }
    }
  }
}
</style>
